﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="famails.Contact" MasterPageFile="~/famails.Master" %>


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <div class="main-page" style="padding-top: 20px; padding-bottom: 20px;
            font-family: 'Patrick Hand', cursive;">
        <div class="container">

<div class="container"  style="padding:20px 0px;">
    <div class="col-md-7 col-lg-7 visible-md visible-lg" style="padding:10px;padding-right:20px;font-size:14px;color:#999;">
        <div class="col-md-12" style="padding:0px;padding-top:10px;font-size:20px;color:#555;">
            <i class="fa fa-thumb-tack"></i> Thông tin liên hệ
        </div>                                         
        
        <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;">
            Để biết thêm thông tin về sản phẩm, thông tin, tuyển dụng, quảng cáo xin vui lòng gửi mail đến địa chỉ :
        </div> 
        <div class="col-md-12">
            info@famails.com
        </div> 
        <div class="col-md-12" style="padding:0px;padding-top:10px;padding-bottom:10px;font-size:20px;color:#555;">
            <i class="fa fa-cogs fa-1x"></i> Hỗ trợ kỹ thuật
        </div> 
        <div class="col-md-12" style="padding-bottom:10px;">
            Khi quý khách có những nhu cầu hay thắc mắc về kỹ thuật, vui lòng liên hệ với chúng tôi qua hòm thư :
        </div> 
        <div class="col-md-12">
            support@famails.com
        </div> 
        <div class="col-md-12" style="padding:0px;padding-top:10px;padding-bottom:10px;font-size:20px;color:#555;">
            <i class="fa fa-home fa-1x"></i> Trụ sở : 
        </div>
        <div class="col-md-12" style="padding:0px;padding-bottom:10px;font-size:14px;color:#555;">
            <div class="col-md-1" style="line-height:32px;vertical-align:middle;padding:0px;text-align:center;">Từ </div>
            <div class="col-md-4" style="padding:0px;"><input type="text" name="from" class="form-control" style="border-radius:0px;"/></div>
            <div class="col-md-3" style="line-height:32px;vertical-align:middle;padding:0px;text-align:center;">Đến trụ sở tại </div>
            <div class="col-md-4" style="padding:0px;"><input type="text" name="to" class="form-control"  style="border-radius:0px;"/></div>
        </div>
        <div class="col-md-12" id="map" style="height:200px;display:block;"></map></div>
    </div>
    <div class="col-md-5 col-lg5 col-xs-12 col-sm-12" style="padding:10px;padding-top:20px;padding-bottom:20px;border-radius:0px;border:1px solid #eee;
box-shadow: #BABABA 2px 1px 30px 1px;-moz-box-shadow: #BABABA 2px 1px 30px 1px;-webkit-box-shadow: #BABABA 2px 1px 30px 1px;">
         <div class="col-md-12" style="padding-top:10px;padding-bottom:10px;font-size:20px;color:#555;">
            <i class="fa fa-comments fa-1x"></i> Liên hệ với chúng tôi
        </div>
        <form id="Form1" runat="server">
        
        <div class="col-md-12" style="padding-top:10px;">
            <asp:TextBox ID="txtten" runat="server" class="form-control" style="border-radius:0px;" placeholder="Tên khách hàng"></asp:TextBox>
        </div>
        <div class="col-md-12" style="padding-top:10px;">
            <asp:TextBox ID="txtemail" runat="server" class="form-control" style="border-radius:0px;" placeholder="Email"></asp:TextBox>
        </div>
        <div class="col-md-12" style="padding-top:10px;">
            <asp:TextBox ID="txtsodienthoai" runat="server" class="form-control" style="border-radius:0px;" placeholder="Số điện thoại"></asp:TextBox>
        </div>
        <div class="col-md-12" style="padding-top:10px;">
            <asp:TextBox ID="txttieude" runat="server" class="form-control" style="border-radius:0px;" placeholder="Tiêu đề"></asp:TextBox>
        </div>
        <div class="col-md-12" style="padding-top:10px;">
            <asp:TextBox ID="txtconten" TextMode="multiline" Rows="10" runat="server" class="form-control" style="border-radius:0px;" placeholder="Nội dung"></asp:TextBox>
        </div>
        <div class="col-md-12" style="padding-top:10px;">
            <button type="submit" class="btn btn-lg pull-right" style="border-radius:0px;width:200px;background:#333;color:#fff;">Gửi thư</button>
        </div>
          <asp:TextBox ID="txtcontenkhachhang" runat="server" Text="Nội dung cần hỗ trợ của bạn đã được chúng tôi tiếp nhận.Chúng tôi sẽ cố gắn liên hệ lại với bạn trong thời gian sớm nhấn. Trân trọng cảm ơn" Visible="False"></asp:TextBox>
        </form>
    </div>
</div>
            
        </div>
    </div>
    
    <script>
        $(document).ready(function () {

            function initMap() {
                var latlng = new google.maps.LatLng(51.5, 0);
                var mapOptions = {
                    center: latlng,
                    zoom: 8,
                    mapTypeControl: false,
                    streetViewControl: false,
                    styles: [{ "featureType": "water", "stylers": [{ "saturation": 43 }, { "lightness": -11 }, { "hue": "#0088ff" }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "hue": "#ff0000" }, { "saturation": -100 }, { "lightness": 99 }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "color": "#808080" }, { "lightness": 54 }] }, { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [{ "color": "#ece2d9" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#ccdca1" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#767676" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [{ "visibility": "on" }, { "color": "#b8cb93" }] }, { "featureType": "poi.park", "stylers": [{ "visibility": "on" }] }, { "featureType": "poi.sports_complex", "stylers": [{ "visibility": "on" }] }, { "featureType": "poi.medical", "stylers": [{ "visibility": "on" }] }, { "featureType": "poi.business", "stylers": [{ "visibility": "simplified" }] }]
                };
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
            }

            function drivingRoute(from, to) {
                var request = {
                    origin: from,
                    destination: to,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING,
                    unitSystem: google.maps.UnitSystem.METRIC
                };
                $('#controls p').removeClass('error');
                $('#controls p').text('loading');
                if (typeof (drivingLine) !== 'undefined') drivingLine.setMap(null);
                directionsService.route(request, function (response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {

                        var totalKM = (response.routes[0].legs[0].distance.value / 1000);
                        var miles = Math.round(totalKM * 0.621371192 * 10) / 10;
                        var distanceText = miles + ' miles';
                        $('#controls p').text(distanceText);

                        drivingLine = new google.maps.Polyline({
                            path: response.routes[0].overview_path,
                            strokeColor: "#b00",
                            strokeOpacity: .75,
                            strokeWeight: 5
                        });
                        drivingLine.setMap(map);
                        map.fitBounds(response.routes[0].bounds);

                    }

                    else {
                        $('#controls p').addClass('error');
                        $('#controls p').text('cannot load route');
                    }

                });

            }

            $('input').keyup(function () {
                drivingRoute(
                  $('input[name=from]').val(),
                  $('input[name=to]').val()
                );
            });

            var map;
            var drivingLine;
            var directionsService = new google.maps.DirectionsService();
            initMap();
            $('input[name=from]').val('New York');
            $('input[name=to]').val('Renton');
            $('input[name=from]').trigger('keyup');

        });
</script>
</asp:Content>
